<template>
  <Modal :mask-closable="false" :title="`设备卡片打印`" width="1150px" v-model="printVisible"
         :footer-hide="true"
         class="modal-wrap-layout">
    <Row>
      <Col :span="24">
        <section id="equipmentsprintOne" style="display: flex;flex-wrap: wrap;height: 60vh;overflow-y: auto">
          <div class="bigBorder" v-for="(item, index) of record" :key="'a' + index">
            <div class="big-item-Border">
              <div class="cro_left_top"></div>
              <div class="cro_right_top"></div>
              <div class="cro_left_bottom"></div>
              <div class="cro_right_bottom"></div>
              <h1 class="print-big-title">
                设备管理档案卡
              </h1>
              <Row class="bigRow">
                <Col :span="15">
                  <Col :span="24" class="print-big-item">
                    <!-- <span class="print-big-item-title">{{ $t('preliminary.EquipmentName') }} </span> -->
                    <span class="print-big-item-title">设备名称</span>
                    <span class="print-big-item-content">{{ item.deviceName }}</span>
                  </Col>
                  <Col :span="24" class="print-big-item">
                    <!-- <span class="print-big-item-title">{{ $t('equipCheck.AssetNo') }} </span> -->
                    <span class="print-big-item-title">资产编号</span>
                    <span class="print-big-item-content">{{ item.assetCode }}</span>
                  </Col>
                  <Col :span="24" class="print-big-item">
                    <!-- <span class="print-big-item-title">{{ $t('equipCheck.SerialNo') }} </span> -->
                    <span class="print-big-item-title">设备流水号</span>
                    <span class="print-big-item-content">{{ item.deviceMId }}</span>
                  </Col>
                  <Col :span="24" class="print-big-item">
                    <!-- <span class="print-big-item-title">{{ $t('equipCheck.EquipmentNo') }}</span> -->
                    <span class="print-big-item-title">设备编号</span>
                    <span class="print-big-item-content">{{ item.deviceNo }}</span>
                  </Col>
                  <Col :span="24" class="print-big-item">
                    <!-- <span class="print-big-item-title">{{ $t('equipCheck.Model') }}</span> -->
                    <span class="print-big-item-title">规格型号</span>
                    <span class="print-big-item-content">{{ item.deviceSpec }}</span>
                  </Col>
                  <Col :span="24" class="print-big-item">
                    <!-- <span class="print-big-item-title">{{ $t('ledger.Voltage') }}(V)</span> -->
                    <span class="print-big-item-title">电源电压(V)</span>
                    <span class="print-big-item-content">{{ item.voltage }}</span>
                  </Col>
                </Col>
                <Col :span="9">
                  <Col :span="24">
                    <Col :span="24" class="print-big-item">
                      <!-- <span class="print-big-item-title1">{{ $t('ledger.EquipmentPower') }} </span> -->
                      <span class="print-big-item-title1">设备功率(kW)</span>
                      <span class="print-big-item-content1">{{ item.devicePower }}</span>
                    </Col>
                    <Col :span="24" class="print-big-item">
                      <!-- <span class="print-big-item-title1">{{ $t('ledger.EquipmentWeight') }} </span> -->
                      <span class="print-big-item-title1">设备重量(kg)</span>
                      <span class="print-big-item-content1">{{ item.deviceWeight }}</span>
                    </Col>
                  </Col>
                  <Col :span="24" align="center" class="print-qrcode" style="padding:25px 0 ">
                    <div id="qrcode" ref="qrcode"></div>
                  </Col>
                </Col>
              </Row>
            </div>
          </div>
        </section>
        <Row style="margin: 5px">
          <Col align="center">
            <Button v-print="'#equipmentsprintOne'" type="primary">打印</Button>
          </Col>
        </Row>
      </Col>
<!--      <Col :span="12">-->
<!--        <section id="equipmentsprintTwo">-->
<!--          <div class="bigBorder" v-for="(item1, index) of record" :key="'b' + index">-->
<!--            <div class="big-item-Border">-->
<!--              <div class="cro_left_top"></div>-->
<!--              <div class="cro_right_top"></div>-->
<!--              <div class="cro_left_bottom"></div>-->
<!--              <div class="cro_right_bottom"></div>-->
<!--              <h1 class="print-big-title">-->
<!--                设备管理档案卡-->
<!--              </h1>-->
<!--              <Row class="bigRow">-->
<!--                <Col :span="15">-->
<!--                  <Col :span="24" class="print-big-item1">-->
<!--                    &lt;!&ndash; <span class="print-big-item-title">{{ $t('preliminary.EquipmentName') }} </span> &ndash;&gt;-->
<!--                    <span class="print-big-item-title">设备名称</span>-->
<!--                    <span class="print-big-item-content">{{ item1.deviceName }}</span>-->
<!--                  </Col>-->
<!--                  <Col :span="24" class="print-big-item1">-->
<!--                    &lt;!&ndash; <span class="print-big-item-title">{{ $t('equipCheck.AssetNo') }} </span> &ndash;&gt;-->
<!--                    <span class="print-big-item-title">资产编号</span>-->
<!--                    <span class="print-big-item-content">{{ item1.assetCode }}</span>-->
<!--                  </Col>-->
<!--                  <Col :span="24" class="print-big-item1">-->
<!--                    &lt;!&ndash; <span class="print-big-item-title">{{ $t('equipCheck.SerialNo') }} </span> &ndash;&gt;-->
<!--                    <span class="print-big-item-title">设备流水号</span>-->
<!--                    <span class="print-big-item-content">{{ item1.deviceMId }}</span>-->
<!--                  </Col>-->
<!--                  <Col :span="24" class="print-big-item1">-->
<!--                    &lt;!&ndash; <span class="print-big-item-title">{{ $t('equipCheck.EquipmentNo') }}</span> &ndash;&gt;-->
<!--                    <span class="print-big-item-title">设备编号</span>-->
<!--                    <span class="print-big-item-content">{{ item1.deviceNo }}</span>-->
<!--                  </Col>-->
<!--                </Col>-->
<!--                <Col :span="9" class="print-big-item1">-->
<!--                  <Col :span="24" align="center" class="print-qrcode">-->
<!--                    <div id="qrcodeOne" ref="qrcodeOne"></div>-->
<!--                  </Col>-->
<!--                </Col>-->
<!--              </Row>-->
<!--            </div>-->
<!--          </div>-->
<!--        </section>-->
<!--        <Row style="margin: 5px">-->
<!--          <Col align="center">-->
<!--            <Button v-print="'#equipmentsprintTwo'" type="primary">选择打印</Button>-->
<!--          </Col>-->
<!--        </Row>-->
<!--      </Col>-->
    </Row>
  </Modal>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  name: "ledgerPrintModal",
  data() {
    return {
      type: '',
      printVisible: false,
      record: [],
    }
  },
  methods: {
    show(record, type) {
      console.log(record,'record')
      this.printVisible = true;
      this.type = type;
      let mids = record.map(item => {
        return item.deviceMId
      })
      this.record = record

      this.printDetail(mids.join(','))
    },
    printDetail(deviceMId) {
      this.$nextTick(() => {
        this.createQRCode()
        this.createQRCodeOne()
      })
      // this.axios({
      //     method: 'get',
      //     url: '/dms/dmsDeviceTz/getDevicePrint',
      //     params: {
      //         deviceMId
      //     }
      // }).then(res => {
      //     if (res.code === 200) {
      //         this.record = res.data
      //         this.$nextTick(()=>{
      //             this.createQRCode()
      //             this.createQRCodeOne()
      //         })
      //     } else {
      //         this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
      //     }
      // })

    },
    createQRCode() {
      this.$nextTick(() => {
        this.record.forEach((item, index) => {
          console.log(item, index, 123123);
          this.$refs.qrcode[index].innerHTML = ''; //清除二维码方法一
          let text = item.deviceNo;
          setTimeout(() => {
            let qrcode = new QRCode(this.$refs.qrcode[index],
                {
                  text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
                  width: 120,
                  height: 120,
                  colorDark: '#000000',
                  colorLight: '#fff',
                  correctLevel: QRCode.CorrectLevel.H, // 使用最高容错级别
                  margin: 10
                })
            let logo = new Image();
            logo.crossOrigin = 'Anonymous';
            // logo.src = require("@/assets/images/icon1.png");
            logo.onload = function () {
              let qrImg = qrcode._el.getElementsByTagName('img')[0];
              let canvas = qrcode._el.getElementsByTagName('canvas')[0];
              // let ctx = canvas.getContext("2d");
              // ctx.drawImage(logo, 120 * 0.5 - 33, 120 * 0.5 - 17, 66, 33);
              qrImg.src = canvas.toDataURL();
            }
          }, 500)
        })
      })
    },
    createQRCodeOne() {
      this.$nextTick(() => {
        this.record.forEach((item, index) => {
          this.$refs.qrcodeOne[index].innerHTML = ''; //清除二维码方法一
          let text = item.deviceNo;
          setTimeout(() => {
            let qrcode = new QRCode(this.$refs.qrcodeOne[index], {
              text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
              width: 150,
              height: 150,
              colorDark: '#000000',
              colorLight: '#777fff',
              correctLevel: QRCode.CorrectLevel.H, // 使用最高容错级别
              margin: 10
            })
            let logo = new Image();
            logo.crossOrigin = 'Anonymous';
            // logo.src = require("@/assets/images/icon1.png");
            logo.onload = function () {
              let qrImg = qrcode._el.getElementsByTagName('img')[0];
              let canvas = qrcode._el.getElementsByTagName('canvas')[0];
              // let ctx = canvas.getContext("2d");
              // ctx.drawImage(logo, 150 * 0.5 - 33, 150 * 0.5 - 17, 66, 33);
              qrImg.src = canvas.toDataURL();
            }
          }, 500)
        })
      })
    }
  }
}
</script>

<style media="print">
@page {
  size: auto;
  margin: 3mm;
}
</style>
<style lang="scss" scoped>
.bigBorder {
  //background: rgb(1, 112, 183) !important;
  width: 14cm;
  height: 9cm;
  padding: 12px;
  margin-bottom: 0.1cm;
  margin-right: 0.1cm;

  .big-item-Border {
    position: relative;
    border: 2px solid #777;
    height: 100%;

    .cro_left_top,
    .cro_right_top,
    .cro_left_bottom,
    .cro_right_bottom {
      position: absolute;
      width: 20px;
      height: 20px;
      z-index: 999;
      //background: rgb(1, 112, 183) !important;
    }

    .cro_left_top {
      top: -2px;
      left: -2px;
      border-radius: 0px 0px 20px 0px;
      border-bottom: 2px solid #777;
      border-right: 2px solid #777;
    }

    .cro_right_top {
      top: -2px;
      right: -2px;
      border-radius: 0px 0px 0px 20px;
      border-bottom: 2px solid #777;
      border-left: 2px solid #777;
    }

    .cro_left_bottom {
      left: -2px;
      bottom: -2px;
      border-radius: 0px 20px 0px 0px;
      border-top: 2px solid #777;
      border-right: 2px solid #777;
    }

    .cro_right_bottom {
      right: -2px;
      bottom: -2px;
      border-radius: 20px 0px 0px 0px;
      border-top: 2px solid #777;
      border-left: 2px solid #777;
    }
  }

  .bigRow {
    padding: 0 15px;
  }
}

.print-big-title {
  font-size: 26px;
  font-weight: bold;
  padding: 20px 0;
  text-align: center;
  color: #000 !important;
  // letter-spacing: 6px;
}

.print-big-item {
  color: #000 !important;
  padding: 4px 0;

  .print-big-item-title {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 33%;
    color: #000 !important;
    text-align-last: justify;
  }

  .print-big-item-content {
    font-size: 14px;
    display: inline-block;
    font-weight: 600;
    margin-left: 3%;
    width: 60%;
    text-align: center;
    color: #000 !important;
    border: 1px solid #333;

  }

  .print-big-item-title1 {
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    width: 65%;
    color: #000 !important;
    text-align-last: justify;
  }

  .print-big-item-content1 {
    font-size: 14px;
    display: inline-block;
    font-weight: 500;
    text-align: center;
    margin-left: 2%;
    width: 33%;
    color: #000 !important;
    border: 1px solid #333;
  }
}

.print-big-item1 {
  color: #000 !important;
  padding: 12px 0;



  .print-big-item-title {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    width: 33%;
    color: #000 !important;
    text-align-last: justify;
  }

  .print-big-item-content {
    font-size: 14px;
    display: inline-block;
    font-weight: 600;
    margin-left: 3%;
    width: 60%;
    text-align: center;
    color: #000 !important;
    border: 1px solid #333;

  }
}

.print-qrcode {
  padding: 10px;
  background: #fff;
}
</style>
